import { memo, useMemo, useState } from "react";
import DataDisplay_content from "../../baseUI/dataDisplay_content/idnex";
import PaymentStyle from "./style";
import Buy_btn from "../../components/buy_btn";
import { useNavigate, useSearchParams } from "react-router-dom";
import { ProductType } from "../../types/product";
import { Badge, DotLoading, Image, Stepper } from "antd-mobile";
import { useGetOrganizationInfo } from "../../service/organization";
import Hr from "../../baseUI/hr";
import { routeItmeType } from "../../router";
import { useGetUserInfo } from "../../service/user";

const Payment = memo(() => {
  const [query] = useSearchParams();
  const nav = useNavigate();
  const { data, loading: getUserInfoLoading } = useGetUserInfo();
  const productData = JSON.parse(Object.fromEntries(query).data) as ProductType;
  const buyNumByOrder = JSON.parse(
    Object.fromEntries(query).buyNumByOrder
  ) as number;
  const { data: orgData } = useGetOrganizationInfo(productData.orgId);
  const [buyNum, setBuyNum] = useState(1);

  const maxSell = useMemo(() => {
    const curStock = productData.stock - productData.sellNum;
    return curStock > productData.limitBuyNum - buyNumByOrder
      ? productData.limitBuyNum - buyNumByOrder
      : curStock;
  }, [productData.sellNum, productData.stock, productData.limitBuyNum]);
  const orgClick = () => {
    nav(`/${routeItmeType.ORG_DETAIL}/${orgData.id}`);
  };
  return (
    <DataDisplay_content loading={false} title="提交订单">
      <PaymentStyle>
        <div className="payment-wrapper">
          <div className="org" onClick={orgClick}>
            <div className="logo">
              <Image
                src={orgData?.logo}
                fit="cover"
                alt="图片加载错误，请重试"
              />
            </div>
            <div className="org_name">{orgData?.name}</div>
          </div>
          <Hr />
          <div className="product">
            <div className="product_name">{productData.name}</div>
            <div className="product_desc">{productData.desc}</div>
          </div>
          <Hr />
          <div className="buy_num">
            <div className="buy_num_title">购买数量</div>
            <div className="buy_num_control">
              <div>
                <Stepper
                  onChange={(value) => setBuyNum(value)}
                  min={1}
                  max={maxSell}
                  value={buyNum}
                />
              </div>
              <div className="time_price">
                小计：{buyNum * productData.preferentialPrice} 元
              </div>
            </div>
          </div>
          <Hr />
          <div className="phone">
            <Badge content="*">
              <div>手机号</div>
            </Badge>
            {getUserInfoLoading ? (
              <DotLoading color="primary" style={{ margin: "0" }} />
            ) : (
              <div>
                {data.tel?.length > 0 ? (
                  data.tel
                ) : (
                  <a
                    onClick={() => {
                      nav(`/${routeItmeType.EDIT_USER_INFO}/${data.id}`);
                    }}
                  >
                    绑定手机号
                  </a>
                )}
              </div>
            )}
          </div>
        </div>
        {
          orgData &&
          <Buy_btn
            data={productData}
            isPayment={true}
            buy_num={buyNum}
            orgId={orgData?.id!}
            bindTel={data?.tel?.length > 0}
          />
        }
      </PaymentStyle>
    </DataDisplay_content>
  );
});

export default Payment;
